<template>
    <h1>登录页面</h1>

    <div class="card" style="width: 30%; margin: 0 auto; text-align: center">
        <div class="card-body">
            <input type="hidden" name="id" />
            <!--    不要给id手动设置value="null"，这会传一个字符串过去，而后端需要一个Integer，无法转成字符串，会报400-->
            <div class="mb-3">
                <label for="account" class="form-label">账号：</label>
                <input type="text" name="account" class="form-control" id="account" v-model="account" />
            </div>
            <div class="mb-3">
                <label for="password" class="form-label">密码：</label>
                <input type="password" name="password" class="form-control" id="password" v-model="password" />
            </div>
            <!-- <div class="mb-3">
                <label for="code" class="form-label">验证码：</label>
                <div class="col">
                    <input
                        type="text"
                        name="code"
                        class="form-control"
                        id="code"
                        style="width: 80%; display: inline-block"
                    />
                    <img src="/codeImage" id="codeImage" style="height: 33px; cursor: pointer" onclick="flush()" />
                </div>
                <span th:text="${session.captchaCodeErrorMsg}" style="color: #ff0000"></span>
            </div> -->
            <button type="button" class="btn btn-primary" @click="login">登录</button>
            <div style="color: red; font-size: 14px">{{ errorText }}</div>
        </div>
    </div>
</template>

<script>
import { ref } from "vue";
import $ from "jquery";
import { useStore } from "vuex";
import { useRouter } from "vue-router";

export default {
    setup(props, context) {
        let errorText = ref("");
        let account = ref("");
        let password = ref("");
        let store = useStore();
        let router = useRouter();

        function login() {
            console.log(account.value, password.value);
            $.ajax({
                url: "/login",
                type: "post",
                data: {
                    id: "",
                    account: account.value,
                    password: password.value,
                },
                success(resp) {
                    if (resp.status !== undefined) {
                        store.dispatch("login", true);
                        router.push("/");
                    }
                },
            });
        }

        return {
            errorText,
            account,
            password,
            login,
        };
    },
};
</script>

<style scoped></style>
